@use 'src/themes' as *;

header {
  width: 100%;
  height: 64px;
  position: sticky;
  top: 0;
  background-color: #edf1f7;
  .user-container {
    display: flex;
    width: 352px;
    gap: 12px;
    .input-container {
      width: 300px;
      position: relative;
      nb-icon {
        @include icon();
        position: absolute;
        left: 12px;
        top: 8px;
      }
    }
  }

  .icon-container {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 50%;
    background-color: #fff;
    nb-icon {
      @include icon();
    }
  }

  ::ng-deep [nbInput].status-basic:focus {
    border-color: nb-theme(primary-tap-blue);
  }

  ::ng-deep .user-picture {
    border-color: rgba(0,0,0,.1);
    background: rgba(255, 255, 255, .4);
  }
}